<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>

<head>
    <title>报表</title>
    {{template "admin/html-head.html" .}}
    <!-- Morris chart -->
    <link rel="stylesheet" href="../../static/bower_components/morris.js/morris.css">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

        <!-- Main Header -->
        {{template "admin/html-header.html" .}}
        <!-- Left side column. contains the logo and sidebar -->
        {{template "admin/html-aside.html" .}}

        <!-- Content Wrapper. Contains page content -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    nodejs和golang拉钩职位数量曲线图表
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Home</a></li>
                    <li><a href="#">工作数量统计</a></li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <!-- row 近一个月走势-->
                <div class="row">
                    <section class="col-lg-12 connectedSortable">
                        <!-- solid sales graph -->
                        <div class="box box-solid bg-green-gradient">
                            <div class="box-header">
                                <i class="fa fa-th"></i>
                                <h3 class="box-title">近两月</h3>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn bg-green btn-sm" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn bg-green btn-sm" data-widget="remove"><i
                                            class="fa fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="box-body border-radius-none">
                                <div class="chart" id="line-chart-recently" style="height: 300px;"></div>
                            </div>
                        </div>
                    </section>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
                <!-- row 所有历史走势-->
                <div class="row">
                    <section class="col-lg-12">
                        <!-- solid sales graph -->
                        <div class="box box-solid bg-green-gradient">
                            <div class="box-header">
                                <i class="fa fa-th"></i>
                                <h3 class="box-title">每月平均</h3>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn bg-green btn-sm" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn bg-green btn-sm" data-widget="remove"><i
                                            class="fa fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="box-body border-radius-none">
                                <div class="chart" id="line-chart-history" style="height: 300px;"></div>
                            </div>
                        </div>
                    </section>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <!-- Main Footer -->
        <footer class="main-footer">
            <!-- To the right -->
            <div class="pull-right hidden-xs">
                Anything you want
            </div>
            <!-- Default to the left -->
            <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
        </footer>

        <!-- Control Sidebar -->
        {{template "admin/html-control-sidebar.html"}}
        <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->
    {{template "admin/html-js.html"}}
    <!-- Morris.js charts -->
    <script src="../../static/bower_components/raphael/raphael.min.js"></script>
    <script src="../../static/bower_components/morris.js/morris.min.js"></script>
    <script>
        $(function () {
            //最近一个月走势
            var startDate = moment().subtract(2, "months").format("YYYY-MM-DD");
            var endDate = moment().format("YYYY-MM-DD");
            $.when(
                $.get("/admin/job-count/count-data-recently?language=nodejs&startDate=" + startDate + "&endDate=" + endDate),
                $.get("/admin/job-count/count-data-recently?language=golang&startDate=" + startDate + "&endDate=" + endDate)
            ).done(function (res, res2) {
                var data = [];
                res[0] && res[0].data && res[0].data.forEach(function (item, index) {
                    data[index] = {
                        y: moment(item.created_at).format("YYYY-MM-DD"),
                        item1: item.amount,
                    }
                });
                res2[0] && res2[0].data && res2[0].data.forEach(function (item, index) {
                    data[index].item2 = item.amount;
                });
                var line = new Morris.Line({
                    element: 'line-chart-recently',
                    resize: true,
                    data: data,
                    xkey: 'y',
                    ykeys: ['item1', 'item2'],
                    labels: ['node', 'golang'],
                    lineColors: ['#996699', '#6699CC'],
                    lineWidth: 2,
                    hideHover: true,
                    gridTextColor: '#efefef',
                    gridStrokeWidth: 0.4,
                    pointSize: 4,
                    pointStrokeColors: ['#efefef'],
                    gridLineColor: '#efefef',
                    gridTextFamily: 'Open Sans',
                    gridTextSize: 10,
                    xLabels: "day"
                });
            });

            //历史走势

            $.when(
                $.get("/admin/job-count/count-data-all?language=nodejs"),
                $.get("/admin/job-count/count-data-all?language=golang")
            ).done(function (res, res2) {
                var datas = [];
                res[0] && res[0].data && res[0].data.forEach(function (item, index) {
                    datas[index] = {
                        y: moment(item.created_at).format("YYYY-MM"),
                        item1: item.amount,
                    }
                });
                res2[0] && res2[0].data && res2[0].data.forEach(function (item, index) {
                    datas[index].item2 = item.amount;
                });
                var line = new Morris.Line({
                    element: 'line-chart-history',
                    resize: true,
                    data: datas,
                    xkey: 'y',
                    ykeys: ['item1', 'item2'],
                    labels: ['node', 'golang'],
                    lineColors: ['#996699', '#6699CC'],
                    lineWidth: 2,
                    hideHover: true,
                    gridTextColor: '#efefef',
                    gridStrokeWidth: 0.4,
                    pointSize: 4,
                    pointStrokeColors: ['#efefef'],
                    gridLineColor: '#efefef',
                    gridTextFamily: 'Open Sans',
                    gridTextSize: 10,
                    xLabels: "month"
                });
            });
        })
    </script>
    <!-- /REQUIRED JS SCRIPTS -->

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>

</html>